<template>
	<view>
		<image @click="iconMusic.play()" :class="['icon-music',{'rotate':iconMusic.flag}]" src="http://rjinbysql.hn-bkt.clouddn.com/static/images/icon-music.png"></image>
	</view>
</template>

<script setup>
	import { useIconMusicStore } from '@/stores/iconMusic';
	const iconMusic = useIconMusicStore();
</script>

<style>
	.icon-music{
		width: 48rpx;
		height: 48rpx;
		position: absolute;
		top: 150rpx;
		right: 30rpx;
		animation: rotate 3s linear infinite;
		animation-play-state: paused;
	}
	@keyframes rotate {
		100%{
			transform: rotate(360deg);
		}
	}
	.rotate{
		animation-play-state: running;
	}
</style>